<template>
  <div>
    <search :auto-fixed="false" @on-submit="handleChange" @on-change="handleChange" v-model="condition.text"></search>
    <load-more v-show="!cars || !cars.length" :show-loading="false" tip="暂无数据" background-color="#fbf9fe"></load-more>
    <cell @click.native.prevent="handleItemClick(item)" v-for="(item, index) in cars" :key="index" :title="item.hphm"
          :value="item.jylsh" is-link></cell>
    <x-dialog v-model="showDialogStyle" hide-on-blur
              :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
      <p @click="showDialogStyle = false">
        <card :header="{title:`${car.hphm} - ${car.jylsh} - ${car.jycs}`}">
          <div style="font-size: 13px" v-if="$store.state.search.jyxm ==='M1'" slot="content" class="card-demo-flex card-demo-content01">
            <x-table full-bordered style="background-color:#fff;">
              <thead>
              <tr>
                <th></th>
                <th>标准值</th>
                <th>测量值</th>
                <th>人工值</th>
                <th>差值</th>
                <th>限值</th>
                <th>判定</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>外廓长</td>
                <td>{{carInfo.cwkc}}</td>
                <td>{{carInfo.cl_cwkc}}</td>
                <td>{{carInfo.hand_cwkc}}</td>
                <td>{{carInfo.cwkc?carInfo.cwkc - (carInfo.hand_cwkc ? carInfo.hand_cwkc : carInfo.cl_cwkc):null}}</td>
                <td>
                  {{this.limit?`${this.limit.cwkcLimit[0]}-${this.limit.cwkcLimit[1]}`:''}}
                </td>
                <td>
                  <icon :type="(Boolean(carInfo.cwkcpd - 0))?'success-circle':'cancel'"></icon>
                </td>
              </tr>
              <tr>
                <td>外廓宽</td>
                <td>{{carInfo.cwkk}}</td>
                <td>{{carInfo.cl_cwkk}}</td>
                <td>{{carInfo.hand_cwkk}}</td>
                <td>{{carInfo.cwkk?carInfo.cwkk - (carInfo.hand_cwkk ? carInfo.hand_cwkk : carInfo.cl_cwkk):null}}</td>
                <td>
                  {{this.limit?`${this.limit.cwkkLimit[0]}-${this.limit.cwkkLimit[1]}`:''}}
                </td>
                <td>
                  <icon :type="carInfo.cwkkpd - 0?'success-circle':'cancel'"></icon>
                </td>
              </tr>
              <tr>
                <td>外廓高</td>
                <td>{{carInfo.cwkg}}</td>
                <td>{{carInfo.cl_cwkg}}</td>
                <td>{{carInfo.hand_cwkg}}</td>
                <td>{{carInfo.cwkg?carInfo.cwkg - (carInfo.hand_cwkg ? carInfo.hand_cwkg : carInfo.cl_cwkg):null}}</td>
                <td>
                  {{this.limit?`${this.limit.cwkgLimit[0]}-${this.limit.cwkgLimit[1]}`:''}}
                </td>
                <td>
                  <icon :type="carInfo.cwkgpd - 0?'success-circle':'cancel'"></icon>
                </td>
              </tr>
              <tr>
                <td>判定</td>
                <td colspan="6">{{(carInfo.clwkccpd - 0) === 1? "合格":"不合格"}}</td>
              </tr>

              </tbody>
            </x-table>
          </div>
          <div v-if="$store.state.search.jyxm ==='Z1'" slot="content" class="card-demo-flex card-demo-content01">
            <x-table full-bordered style="background-color:#fff;">
              <thead>
              <tr>
                <th></th>
                <th>标准值</th>
                <th>测量值</th>
                <th>差值</th>
                <th>判定</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>整备质量</td>
                <td>{{carInfo.zbzl}}</td>
                <td>{{carInfo.cl_zbzl}}</td>
                <td>{{carInfo.zbzl - carInfo.cl_zbzl}}</td>
                <td>{{(carInfo.zbzlpd - 0) === 1? "合格":"不合格"}}</td>
              </tr>
              <tr>
                <td>限值</td>
                <td colspan="4">{{limit?`${limit.limitLo}-${limit.limitHi}`:''}}</td>

              </tr>

              </tbody>
            </x-table>
          </div>
        </card>
        <br>
        <br>
        <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
      </p>
    </x-dialog>
  </div>
</template>

<script>

  export default {
    name: "List",
    data: function () {
      return {
        cars: [],
        showDialogStyle: false,
        condition: {
          text: '',
          jyxm: ''
        },
        car: {},
        carInfo: {},
        page: {
          size: 20,
          current: 1
        },
        limit: null,
        timeTag: null
      };
    },
    methods: {
      getLimitCurb() {
        const data = {};
        this.limit = null;
        data.api = this.$api.getQualityItemBase;
        data.data = this.$getBase();
        this.$http.post(this.$store.getters.uri, data)
          .then(res => {
            const {data} = res;
            if (data.code !== 200) {
              this.$error(data.message);
              return;
            }
            this.limit = data.data;
          }).catch(err => console.log(err));
      },
      getLimitCarsize() {
        const data = {};
        this.limit = null;
        data.api = this.$api.getCarSizeBase;
        data.data = this.$getBase();
        this.$http.post(this.$store.getters.uri, data)
          .then(res => {
            const {data} = res;
            if (data.code !== 200) {
              this.$error(data.message);
              return;
            }
            this.$success(data.message);
            this.limit = data.data;
          }).catch(err => console.log(err));
      },
      handleChange() {
        if (this.timeTag) {
          clearTimeout(this.timeTag);
        }
        this.timeTag = setTimeout(() => {
          this.handleSearch();
        }, 1000);
      },
      handleSearch() {
        const requestBody = {};
        const jyxm = this.condition.jyxm;
        const text = this.condition.text;
        requestBody.api = this.$api.connDb;

        requestBody.data = {};
        requestBody.data.sql = `select top ${this.page.size * this.page.current} * FROM tab_carsize WHERE 1 = 1`;
        if (jyxm === 'M1') {
          requestBody.data.sql += ' and clwkccpd IS NOT NULL'
        }
        if (jyxm === 'Z1') {
          requestBody.data.sql += ' and zbzlpd is not null'
        }
        if (text) {
          requestBody.data.sql += ` and (hphm like '%${text}%' OR jylsh like '%${text}%') `;
        }
        requestBody.data.sql += ' ORDER BY jylsh'
        this.$http.post(this.$store.getters.uri, requestBody).then(res => {
          const {data} = res;
          const {code} = data;
          if (!(code === 200 || code === '200')) {
            this.$error(data.message);
            return;
          }
          this.cars = data.data;
          this.$success(data.message, null);
          /*          for (let i = 0; i < 5; i++) {

                      let parse = JSON.parse(JSON.stringify(data.data));
                      parse.forEach(item => {
                        this.cars.push(item);
                      })
                    }*/
        }).catch(e => {
          this.$error(e);
          console.log(e);
        });
      },
      handleData(f) {
        this.$request.connDb.call(this, (res) => {
          const {data} = res
          if (data.code !== 200) {
            this.$error(data.message);
            return;
          }
          if (!data.data[0]) {
            return;
          }
          console.log(data.data[0])
          for (const k in data.data[0]) {
            try {
              this.carInfo[k] = (data.data[0][k] - 0);
            } catch (e) {
            }
          }
          if (this.$store.state.search.jyxm === 'M1' && (data.data[0]['clwkccpd'] - 0 === 1)) {
            this.carInfo.cwkcpd = 1;
            this.carInfo.cwkkpd = 1;
            this.carInfo.cwkgpd = 1;
          }
        }, (e) => {
          this.$error(e);
          console.error(e);
        }, f);
      },
      handleItemClick(car) {
        this.car = car;
        this.$store.commit('setCarInfo', car);
        this.showDialogStyle = true;
        if (this.$store.state.search.jyxm === 'M1') {
          this.carInfo = {
            "cwkc": null,
            "cwkk": null,
            "cwkg": null,
            "cl_cwkc": null,
            "cl_cwkk": null,
            "cl_cwkg": null,
            "hand_cwkc": null,
            "hand_cwkk": null,
            "hand_cwkg": null,
            "clwkccpd": null,
            "cwkcpd": null,
            "cwkkpd": null,
            "cwkgpd": null
          }

          this.handleData(this.$sql.getCarSizeDataHasSend);
          this.getLimitCarsize();
        }
        if (this.$store.state.search.jyxm === 'Z1') {
          this.carInfo = {zbzlpd: 0, zbzl: 0, cl_zbzl: 0}
          this.handleData(this.$sql.getCurbDataOfHasSend);
          this.getLimitCurb();
        }
      }
    },
    created() {
      this.condition.jyxm = this.$store.state.search.jyxm;
    }
  }
</script>

<style scoped>
  .card-demo-flex {
    display: flex;
  }

  .card-demo-content01 {
    padding: 10px 0;
  }

  .card-padding {
    padding: 15px;
  }

  .card-demo-flex > div {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }

  .card-demo-flex span {
    color: #f74c31;
  }

  .ok {
    color: #2eb815;
    fill: #2eb815;
  }

  .no {
    color: #fa0000;
    fill: #fa0000;
  }
</style>
